<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       table.game {
    font-size: 14px;
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}
table.game td {
    border: 1px solid #e1e1e1;
    padding: 0;
    height: 30px;
    text-align: center;
}
table.game td.current{
    background: #1890ff;
}
    </style>
</head>

<body>
   <div id="jsContainer">
    <table class="game">
        <tbody>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td class="current"></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        </tbody>
    </table>
</div>
    <script type="text/javascript">
/*
界面中存在id=jsContainer 的节点A，系统会随机生成id为jsLayout的m行n列表格，并随机选中一个td节点，按照如下需求实现bind函数
1. bind函数为document绑定keydown事件
2. 点击上下左右方向键，控制蓝色色块移动
 */
        function bind() {
    document.onkeydown = event => { // 键盘点击事件绑定

    if (!event) return;
    var code = event.keyCode || '';
    if (!{'37': 1, '38': 1, '39': 1, '40': 1}[code]) return;
    event.preventDefault && event.preventDefault();
    //TODO: 请实现按键控制
    var tbody = document.querySelector('.game').querySelector('tbody');
    var current = document.querySelector('.current');
    //获得总的行列值
    var row = tbody.children.length;
    var col = tbody.children[0].children.length;
    //获取当前高亮节点的行列值
    //通过tr.sectionRowIndex和td.cellIndex取得当前tr和td相对于父节点的索引值
    var curRow = current.parentNode.sectionRowIndex;
    var curCol = current.cellIndex;
    //移除当前高亮节点效果
	tbody.children[curRow].children[curCol].classList.remove('current');
    //进行移动方向判断以及边界控制
    switch(code){
      case 38:
        curRow = curRow === 0 ? row - 1 : curRow - 1;
        break;
      case 40:
        curRow = curRow === row - 1 ? 0 : curRow + 1;
        break;
      case 37:
        curCol = curCol === 0 ? col - 1 : curCol - 1;
        break;
      case 39:
        curCol = curCol === col - 1 ? 0 : curCol + 1;
        break;
    }
    //为新节点加入高亮效果
    tbody.children[curRow].children[curCol].classList.add('current');
};
}
// 执行绑定
bind();
    </script>
</body>

</html>